<template>
    <div>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="操作类型" prop="actionType">
                <el-input disabled v-model="form.actionType"></el-input>
            </el-form-item>
			<el-form-item label="操作原因" prop="reason">
				<el-input type="textarea" v-model="form.reason" maxlength="70"></el-input>
			</el-form-item>
            <el-form-item>
				<el-button type="primary" @click="conFirm(formRef)" >确 认</el-button>
				<el-button type="warning" @click="onReset(formRef)" >重 置</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus';
import useRecord from '../../hooks/Record/useRecord'
import { ref,reactive } from "vue"

const props = defineProps({
    data : {
        type: Object,
        required: false
    },
    conFirm : {
        type: Function,
        required: false
    },
    actionType: {
        type: String,
        required: false
    }
})

const rules: FormRules = {
    actionType: [{ required: true, message: '行为类型不能为空！', trigger: 'blur' }],
	reason: [{ required: true, message: '操作原因不能为空！', trigger: 'blur' }],
};
/* 表格数据 */
const form = reactive({
    reason: "",
    actionType: "",
    username: "",
    data: {},
})
form.actionType = props.actionType
const formRef = ref<FormInstance>();
const conFirm = (formEl: FormInstance | undefined) => {
  	if (!formEl) return;
    formEl.validate(valid => {
		if (!valid) return false;
        form.data = props.data
        form.username = localStorage.getItem('ms_username')
        // postRecord(form.value).then( res => {
        //     if(res.status===200){
        //         ElMessage.success("行为成功记录！")
        //     }
        // })
        props.conFirm(form)
	});
};

const { postRecord } = useRecord()
defineExpose({
    postRecord,
})

const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<style scoped>
.content-title {
    font-weight: 400;
    line-height: 10px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>